checkLogin()
renderUsername()
registerLoginOut()
getData()

function renderOverview(overview){
    Object.keys(overview).forEach(key => {  
            document.querySelector(`.${key}`).innerHTML = overview[key];  
        });  
}

function renderYearSalary(year){
    const line=document.querySelector('#line')
    const myChart=echarts.init(line)

    const option={
        title:{
            text:"2024春招薪资走势",
            left:'12',
            top:'15'
        },
        grid:{
            top:'20%'
        },
        yAxis:{
            type:'value',
            splitLine:{
                lineStyle:{
                    type:'dashed'
                }
            }
        },
        xAxis:{
            type:'category',
            axisLine:{
                lineStyle:{
                    type:'dashed',
                    color:'#ccc'
                }
            },
            data:year.map(v=>v.month)
        },
        series: [{  
            type: 'line',  
            data: year.map(v => v.salary),  
            symbolSize: 10, 
            lineStyle: {  
                width: 8,  
                color: {  
                    type: 'linear',  
                    x: 0,  
                    y: 0,  
                    x2: 1,  
                    y2: 0,  
                    colorStops: [{  
                        offset: 0, color: '#479dee'  
                    }, {  
                        offset: 1, color: '#45c75f'  
                    }],  
                    global: false  
                }  
            },  
            smooth: true, 
            areaStyle: {  
                color: {  
                    type: 'linear',  
                    x: 0,  
                    y: 0,  
                    x2: 0,  
                    y2: 1,  
                    colorStops: [{  
                        offset: 0, color: '#b2d7f7'  
                    }, {  
                        offset: 1, color: '#5b6f77'  
                    }],  
                    global: false  
                }  
            }  
        }],  
        tooltip: { 
            show: true,  
            trigger: 'axis'  
        }  
    };  
  
    myChart.setOption(option); 
}

//
function renderSalary(salaryData) {  
    const salary = document.querySelector("#salary");  
    const myChart = echarts.init(salary);  
    const option = {  
        title: {  
            text: "2024春招薪资走势",  
            left: '12',  
            top: '15'  
        },  
        tooltip: {  
            trigger: "item"  
        },  
        legend: {  
            bottom: "5%",  
            left: "center"  
        },  
        series: [{  
            name: "班级薪资分布",  
            type: "pie",  
            radius: ["55%", "70%"],  
            itemStyle: {  
                borderColor: "#fff",  
                borderRadius: 15,  
                borderWidth: 2  
            },  
            emphasis: {  
                label: {  
                    show: true,  
                    fontSize: 10, // 根据需要调整字体大小  
                    fontWeight: 'bold'  
                }  
            },  
            label: {  
                show: true,  
                position: "center",  
                avoidLabelOverlap: false // 拼写修正  
            },  
            labelLine: {  
                show: true  
            },  
            data: salaryData.map(v => ({  
                value: v.g_count + v.b_count,  
                name: v.label  
            }))  
        }],  
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']  
    };  
    myChart.setOption(option);  
}
function renderGroupsalary(groupData) {  
    const dom = document.querySelector('#lines');  
    const myChart = echarts.init(dom); // 假设已经正确引入了echarts  
    const option = {  
        tooltip: {}, // 显示提示框，这里可以添加更多配置  
        grid: {  
            left: 70,  
            top: 30,  
            right: 30,  
            bottom: 50  
        },  
        xAxis: {  
            type: 'category',  
            data: groupData[1].map(v => v.name),  
            axisLine: {  
                lineStyle: { // 注意这里是lineStyle，不是linestyle  
                    color: '#ccc',  
                    type: 'dashed' // 注意这里是'dashed'，不是'dashed"'  
                }  
            },  
            axisLabel: {  
                color: '#999'  
            }  
        },  
        yAxis: {  
            type: 'value',  
            splitLine: {  
                lineStyle: {  
                    type: 'dashed'  
                }  
            }  
        },  
        series: [  
            {  
                name: '期望薪资',  
                data: groupData[1].map(v => v.hope_salary),  
                type: 'bar',  
                itemStyle: { // 注意这里是itemStyle，不是itemstyle  
                    color: new echarts.graphic.LinearGradient(  
                        0, 0, 0, 1, // 渐变方向  
                        [{  
                            offset: 0,  
                            color: '#34D39A' // 0% 处的颜色  
                        }, {  
                            offset: 1,  
                            color: 'rgba(52,211,154,0.2)' // 100% 处的颜色  
                        }]  
                    )  
                }  
            },  
            {  
                name: '实际薪资',  
                data: groupData[1].map(v => v.salary),  
                type: 'bar',  
                itemStyle: { // 假设您也想要为实际薪资设置渐变颜色  
                    color: new echarts.graphic.LinearGradient(  
                        0, 0, 0, 1,  
                        [{  
                            offset: 0,  
                            color: '#FF4500' // 示例颜色  
                        }, {  
                            offset: 1,  
                            color: 'rgba(255,69,0,0.2)'  
                        }]  
                    )  
                }  
            }  
        ]  
    };  
    myChart.setOption(option);  
}
// 渲染男女薪资分布函数
function renderGenderSalary(salaryData) {
    // console.log(salaryData)
  
    // 初始化实例
    const dom = document.querySelector('#gender')
    const myChart = echarts.init(dom)
  
    // 定义选项和数据
    const option = {
      tooltip: {
        trigger: 'item'
      },
      // 颜色
      color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
      // 标题，通过数组设置多个
      title: [
        {
          text: '男女薪资分布',
          left: 10,
          top: 10,
          // text属性的样式
          textStyle: {
            // 文字的大小
            fontSize: 16
          }
        },
        {
          text: '男生',
          left: '50%',
          top: '45%',
          textStyle: {
            fontSize: 12
          },
          textAlign: 'center'
        },
        {
          text: '女生',
          left: '50%',
          top: '85%',
          textStyle: {
            fontSize: 12
          },
          textAlign: 'center'
        }
      ],
      series: [
        {
          type: 'pie',
          radius: ['20%', '30%'],
          // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          center: ['50%', '30%'],
          data: salaryData.map(v => {
            return { value: v.b_count, name: v.label }
          })
        },
        {
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          data: salaryData.map(v => {
            return { value: v.g_count, name: v.label }
          })
        }
      ]
    }
  
    // 基于选项和数据绘制图表
    myChart.setOption(option)
  }
  
  // 渲染籍贯分布
  function renderProvince(provinceData) {
    // console.log(provinceData)
    const dom = document.querySelector('#map')
    const myEchart = echarts.init(dom)
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
  
    // 筛选数据
    dataList.forEach(item => {
      const res = provinceData.find(v => {
        return v.name.includes(item.name)
      })
      // console.log(res)
      // 数据赋值
      if (res !== undefined) {
        item.value = res.value
      }
    })
    // console.log(dataList)
  
    const option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', 'yellowgreen'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
async function getData() {  
  
        const res = await axios({  
            url: "/dashboard",  

        });  
        console.log(res.data.data);  
        const {overview,year,salaryData,groupData,provinceData }= res.data .data
        renderOverview(overview)
        renderYearSalary(year)
        renderSalary(salaryData)
        renderGroupsalary(groupData)
        renderGenderSalary(salaryData)
        renderProvince(provinceData)
        
}


getData()